
<template>
  <transition>
    <div class="recommend" ref="recommend">
      <scroll :list='discList' class="container" ref="scrollRef">
        <div>
          <banner :banner-list='banner' @img-load='imgLoad' />
          <h2 class="recommend-title">热门歌单推荐</h2>
          <disc :disc-list='discList' @img-load='discImageLoad' />
          <load v-show="!discList.length" />
        </div>
      </scroll>
    </div>
  </transition>
</template>

<script>
import Scroll from 'components/base/Scroll'
import Disc from 'components/base/Disc'
import Load from 'components/base/Load'
import Banner from 'components/common/Banner'

import { getRecommendMusic, getBannerList } from 'api/recommend.js'
import { playListMixin } from 'common/js/mixin'
export default {
  name: 'recommend',
  mixins: [playListMixin],
  components: { Scroll, Load, Banner, Disc },
  data() {
    return {
      discList: [],
      banner: []
    }
  },
  created() {
    this.loadBanner()
    this.loadRecommend()
  },
  methods: {
    discImageLoad() {
      // this.$refs.scrollRef.refresh()
    },
    imgLoad() {
      this.$refs.scrollRef.refresh()
    },
    handlePlayList(playlist) {
      const bottom = playlist.length ? '60px' : ''
      this.$refs.recommend.style.bottom = bottom
      this.$refs.scrollRef.refresh()
    },
    async loadBanner() {
      const { data } = await getBannerList()
      this.banner = data.data
    },
    async loadRecommend() {
      const { data } = await getRecommendMusic()
      this.discList = data.data.list
    }
  }
}
</script>

<style scoped>
.recommend {
  position: fixed;
  top: 84px;
  bottom: 0;
  left: 0;
  right: 0;
}
.recommend-title {
  color: var(--color-theme);
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}
.container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}
</style>